<template>
	<!-- 首页灵活用工详情页组件 -->
	<view class="main">
		<lgMap @son="getValue" :mapList="mapList"/>
		<view class="allReg">	
			<u-search class="sear" v-model="keyWord" :show-action="true" placeholder="请输入正确企业名称" bg-color='white' action-text="搜索"  :animation="false"  @search="searchClick" @custom="searchClick"></u-search>
		</view>
		<view class="registration" @click="goRegistrater">
			<u-icon name="edit-pen" :size="40"></u-icon>
			<text>登记</text>
		</view>
		<view class="registration1" @click="tabulation">
			<u-icon name="list" :size="40"></u-icon>
			<text>列表</text>
		</view>
		
		
		<u-popup v-model="show" mode="center" height="120px" width="300px" overflow-y: hidden :mask="false" :closeable="true" >
		<ul class="listV" @click="goDetail(tempList.id)">
				<li class="ulLi1">
					<view class="img">
						<image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v3/yiZ.png" mode=""></image>
					</view>
					<view class="text1">{{tempList.name}}</view>
				</li>
				<li class="ulLi1">
					<view class="img">
						<image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/v3/dz.png" mode=""></image>
					</view>
					<view class="text1">{{tempList.address}}</view>
				</li>
				<li class="ulLi1">
					<view class="img">
						<image src="https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/lg/tel.png" mode=""></image>
					</view>
					<view class="text1">联系电话:  {{tempList.tell}}</view>
				</li>
				<!-- <li class="ulLi2">1</li>
				<li class="ulLi3">1</li> -->
				<li class="ulLi2">
					<view class="zp">招聘信息:<text class="text1">{{tempList.job_count}}条</text></view>
					<view class="qz">求职信息:<text class="text1">{{tempList.worker_count}}条</text></view>
				</li>
			</ul>
		</u-popup>
		
		
		 
	</view>
</template>

<script>
	import api from '../../../../api/routes.js'
	import lgMap from "../../../../components/lg-map/lgMap.vue"
	export default{
		data(){
				
			return{
				tapId:{},
				show: false,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				keyWord:'',//搜索关键词
				mapList:[],//传给子组件，显示气泡
				goDetailList:[],//点击气泡进入详情页
				list:[],
				tempList:[],
			}
		},
		components: {
		  lgMap
		},
		onLoad() {
			this.getStationList();
		},
		onShow(){
			this.getMapLocation()  
		},
		methods:{
			// 判断是否开启定位
			getMapLocation(){
				wx.getLocation({
				 type: 'wgs84',
				 success (res) {
					 wx.setStorageSync("nowLat",res.latitude);
					 wx.setStorageSync("nowLgt",res.longitude);
					 },
				 fail() {
					console.log('未拿到经纬度！！');
					uni.showModal({
						title: '提示',
						content: '获取不到当前位置，请打开定位服务功能',
						
					})
				 }
				})
				
			},
			goRegistrater(){
				uni.navigateTo({
					url: '/package/pages/searchJob/other/restAreaRegistration',
				});
			},
			tabulation(){
				uni.navigateTo({
					url: '/package/pages/searchJob/other/restStation',
				});
			},			
			getValue(obj){
				this.show=true;
				this.tempList = this.list.find(r => r.id == obj.markerId)
				 console.log(this.tempList,'=====33333='); 
				
			},
			// 获取企业信息
		async getStationList(){
				let that =this;
				wx.getLocation({
				 type: 'wgs84',
				 success (res) {
					 wx.setStorageSync("nowLat",res.latitude);
					 wx.setStorageSync("nowLgt",res.longitude);
					that.$myRequest({
						url: api.nearbyStation,
						method: "POST",
						data:{
							"page":1, //页码
							"limit":30, //取多少条
							"lgt":res.longitude, //当前用户经度
							"lat":res.latitude ,//当前用户纬度
						},
					}).then(res1=>{
						that.mapList=res1.data.page.list.map(s=>{
							return{
								 id:s.id,
								 latitude: s.lat,//纬度
								 longitude:s.lgt ,//经度
								 iconPath:'https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/lg/mapLogo.png',    //显示的图标
								 rotate:0,   // 旋转度数
								 width:20,   //宽
								 height:20,   //高
								 keyWord:that.keyWord,
								 // //   title:'我在这里',//标注点名
								 // // alpha:0.5,   //透明度
								  callout:{//自定义标记点上方的气泡窗口 点击有效
								  content:s.name,//文本
								  color:'#ffffff',//文字颜色
								 height:20,
								  fontSize:10,//文本大小
								  borderRadius:15,//边框圆角
								  borderWidth:'1',
								  bgColor:'#0099FF',//背景颜色
								  display:'ALWAYS',//常显
								  padding:12,
								 }
							}
						})					
						that.list=res1.data.page.list;						 
						 
					})
				}

			})
	    },
			searchClick(){
				
				 let that = this ; 
				console.log(this.keyWord,"搜索关键词");
				this.$myRequest({
					url: api.nearbyStation,
					method: "POST",
					data:{
						"key":this.keyWord, //企业名称 (搜索使用)
						"page":1, //页码
						"limit":30, //取多少条
						"lgt":wx.getStorageSync('nowLgt'), //当前用户经度
						"lat":wx.getStorageSync('nowLat'), //当前用户纬度
					},
				}).then(res=>{
					
					that.mapList=res.data.page.list.map(s=>{
						return{
							 id:s.id,
							 latitude: s.lat,//纬度
							 longitude:s.lgt ,//经度
							 iconPath: 'https://recruit-oss.oss-cn-beijing.aliyuncs.com/recruit/img/lg/mapLogo.png',    //显示的图标
							 rotate:0,   // 旋转度数
							 width:20,   //宽
							 height:20,   //高
							  keyWord:that.keyWord,
							 // //   title:'我在这里',//标注点名
							 // // alpha:0.5,   //透明度
							  callout:{//自定义标记点上方的气泡窗口 点击有效
							  content:s.name,//文本
							  color:'#ffffff',//文字颜色
							 height:20,
							
							  fontSize:10,//文本大小
							  borderRadius:15,//边框圆角
							  borderWidth:'1',
							  bgColor:'#0099FF',//背景颜色
							  display:'ALWAYS',//常显
							  padding:12,
							 }
						}
					})	
						
					console.log(this.mapList,'搜索企业');
				})
				
			},
			goDetail(id){
				console.log(id,'地图id');
				uni.navigateTo({
					url: '/package/pages/searchJob/other/stationDetailsPage?dtId='+id,
				});
			}
			
		},
			
	};
	
</script>



<style lang="scss" scoped>
	.main{
		// margin:6px 10px;
			
		.popup{
			height: 100px;
			width: 80%;
			border: 1px solid gray;
		}
		
		.allReg{
			height: 36px;
			line-height: 36px;
			width: 80%;
			background: #FDFDFD;			
			position: fixed;
			top: 40px;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			display: flex;
			justify-content: center;
			border-radius: 40px;
			
			
		}
		.registration{
			width: 38px;
			height: 36px;			
			font-size: 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
			// border: 1px solid gray;
			border-radius: 8px;
			background: white;
			color: #1684FC;
			position: fixed;
			top: 92px;
			// top: 54px;
			right: 10px;
		}
		.registration1{
			width: 38px;
			height: 36px;			
			font-size: 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
			// border: 1px solid gray;
			border-radius: 8px;
			background: white;
			color: #1684FC;
			position: fixed;
			top: 160px;
			right: 10px;
			// top: 90px;
			// right: 50px;
		}
		
		
		.img{
			width: 100%;
		}
	}
	
	// 弹出框
	.listV{
		// border: #1684FC 1px solid;
		height: 100%;
		padding-top: 2px;
		.ulLi1{
			display: flex;
			height: 28px;
			line-height: 28px;
			
			.img{
				width: 14%;
				height:100% ;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 24px;
					height: 24px;
				}
			}
			.text1{
				width: 74%;
				height: 100%;
				// border: #1684FC 1px red;
				white-space: nowrap; 
				text-overflow: ellipsis;
				overflow: hidden; 
			}
			
		}
		.ulLi2{
			display: flex;
			justify-content: space-between;
			height: 28px;
			line-height: 28px;
			margin:0 14px;
			.zp{
				width: 49%;
			}
			.qz{
				width: 49%;
			}
		}
		
	}
	
</style>
